{% extends 'base/base.html' %}

{% block title %}帮助中心 - 盲盒商城{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-md-3">
            <!-- 侧边栏导航 -->
            <div class="card mb-4">
                <div class="card-header"><h4 class="mb-0">帮助中心</h4></div>
                <div class="list-group list-group-flush">
                    <a href="/help/faq/" class="list-group-item list-group-item-action">常见问题</a>
                    <a href="/help/#shopping" class="list-group-item list-group-item-action">购物指南</a>
                    <a href="/help/#payment" class="list-group-item list-group-item-action">支付问题</a>
                    <a href="/help/#shipping" class="list-group-item list-group-item-action">配送问题</a>
                    <a href="/help/contact/" class="list-group-item list-group-item-action">联系我们</a>
                    <a href="/help/about/" class="list-group-item list-group-item-action">关于我们</a>
                    <a href="/help/terms/" class="list-group-item list-group-item-action">服务条款</a>
                    <a href="/help/privacy/" class="list-group-item list-group-item-action">隐私政策</a>
                </div>
            </div>
        </div>
        
        <div class="col-md-9">
            <!-- 常见问题 -->
            <div class="card mb-4" id="faq">
                <div class="card-header">
                    <h4 class="mb-0">常见问题</h4>
                </div>
                <div class="card-body">
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    什么是盲盒？
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    盲盒是一种包装形式，顾名思义就是在购买前无法知道具体内容的礼盒。每个盲盒系列都包含多种不同的款式，有常规款和隐藏款，购买后拆开才能知道获得了哪一款。
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    如何查看我的订单？
                                </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    登录账户后，点击右上角的用户菜单，选择"我的订单"选项即可查看您的所有订单记录和状态。
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingThree">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    什么是我的盲盒？
                                </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    "我的盲盒"是您已购买但尚未开启的盲盒列表。您可以在用户菜单中点击"我的盲盒"选项查看，并可以随时点击"开盒"按钮查看盲盒内容。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 购物指南 -->
            <div class="card mb-4" id="shopping">
                <div class="card-header">
                    <h4 class="mb-0">购物指南</h4>
                </div>
                <div class="card-body">
                    <h5>如何购买盲盒</h5>
                    <p>1. 浏览商品页面，选择您喜欢的盲盒系列</p>
                    <p>2. 点击"加入购物车"按钮</p>
                    <p>3. 在购物车中确认商品信息和数量</p>
                    <p>4. 点击"结算"按钮，填写收货信息</p>
                    <p>5. 选择支付方式并完成支付</p>
                    
                    <h5 class="mt-4">积分规则</h5>
                    <p>在本商城购物可以获得积分奖励，积分可用于兑换商品或享受特别优惠：</p>
                    <ul>
                        <li>消费1元获得1积分</li>
                        <li>首次注册赠送100积分</li>
                        <li>每日登录赠送5积分</li>
                        <li>分享商品到社交媒体赠送10积分</li>
                    </ul>
                </div>
            </div>
            
            <!-- 支付问题 -->
            <div class="card mb-4" id="payment">
                <div class="card-header">
                    <h4 class="mb-0">支付问题</h4>
                </div>
                <div class="card-body">
                    <h5>支持的支付方式</h5>
                    <p>我们目前支持以下支付方式：</p>
                    <ul>
                        <li>支付宝</li>
                        <li>微信支付</li>
                    </ul>
                    
                    <h5 class="mt-4">支付失败怎么办？</h5>
                    <p>如果您在支付过程中遇到问题，请尝试以下解决方法：</p>
                    <ul>
                        <li>确认您的账户余额充足</li>
                        <li>检查网络连接是否稳定</li>
                        <li>尝试使用其他支付方式</li>
                        <li>联系客服获取帮助</li>
                    </ul>
                </div>
            </div>
            
            <!-- 配送问题 -->
            <div class="card mb-4" id="shipping">
                <div class="card-header">
                    <h4 class="mb-0">配送问题</h4>
                </div>
                <div class="card-body">
                    <h5>配送范围</h5>
                    <p>我们目前支持全球配送服务，北达北冰洋，南至南极洲，西至西大西洋，东至东太平洋</p>
                    
                    <h5 class="mt-4">配送时间</h5>
                    <p>订单确认后通常在1-3个工作日内发货，具体送达时间取决于您所在的地区：</p>
                    <ul>
                        <li>一线城市：通常1-2天送达</li>
                        <li>二线城市：通常2-3天送达</li>
                        <li>其他地区：通常3-5天送达</li>
                    </ul>
                    
                    <h5 class="mt-4">配送费用</h5>
                    <p>单笔订单满99元免运费，不满99元收取10元运费。</p>
                </div>
            </div>
            
            <!-- 联系我们 -->
            <div class="card" id="contact">
                <div class="card-header">
                    <h4 class="mb-0">联系我们</h4>
                </div>
                <div class="card-body">
                    <p>如果您有任何问题或建议，欢迎通过以下方式联系我们：</p>
                    <ul>
                        <li><strong>客服热线：</strong>400-123-4567（周一至周日 9:00-22:00）</li>
                        <li><strong>客服邮箱：</strong>support@blindbox.com</li>
                        <li><strong>在线客服：</strong>点击网站右下角的"在线客服"按钮</li>
                    </ul>
                    
                    <div class="mt-4">
                        <p>您也可以使用我们的智能聊天机器人获取即时帮助：</p>
                        <a href="/chatbot/" class="btn btn-primary">咨询智能客服</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 